'use client'
import React, {useState} from "react"
import styles from "./index.module.scss"
import Image from 'next/image'
import Active from "@/components/active"
import Remarks from "@/components/remarks"
import Btns from "@/components/btns"
import User from "@/components/user"

const Tag = ({text = ''}) => {
  return(<div className={`${styles['tag-component']}`}>
    {text}
  </div>)
}



interface CarmanProps{
  className?: string
  children?: React.ReactElement | string 
  id: number | string
  startPoint: string | React.ReactElement | React.ReactNode
  endPoint: string | React.ReactElement | React.ReactNode
  tags: Array<string>
  actives: Array<{icon: string, txt: string, num: number, clickHandle: () => void}>
  btns: Array<{icon: string, txt: string, clickHandle: () => void}>
  remarks: string
  userInfo: {
    [key: string]: any
  },
  startLocal: string | React.ReactElement | React.ReactNode
  endLocal: string | React.ReactElement | React.ReactNode
}

const Carman: React.FC<CarmanProps> = ({className = '', id,  startPoint = '',endPoint = '', tags = [], actives = [], btns= [], remarks= "", userInfo, startLocal, endLocal, children}) => {
  return(<div className={`${className} ${styles['carman-component']}`}>
   <div className={`${styles['way']}`}>
      <div className={`${styles['departure']} ${styles['local-base']}`}>
        <div className={`${styles['pro_city_county']}`}>
          <span className={`${styles['start']}`}>起</span>  
          <span className={`${styles['text-center']}`}>{startLocal}</span>
        </div>
        <span className={`${styles['base-detail-address']}`}>{startPoint}</span>
      </div>
      <div className={`${styles['leaveIcon']}`}>
        <Image src="/kaiwang.svg" alt="" width={100} height={60} className={`${styles['leaveSize']}`}/>
      </div>
      <div className={`${styles['destination']} ${styles['local-base']}`}>
        <div className={`${styles['pro_city_county']}`}>
          <span className={`${styles['end']}`}>终</span>
          <span className={`${styles['text-center']}`}>{endLocal}</span>
        </div>
        <span className={`${styles['base-detail-address']}`}>{endPoint}</span>
      </div>
   </div>
   <div className={`${styles['tag-list']}`}>
    {tags.map((text, i) => <Tag text={text} key={i} />)}
   </div>
   <div className={`${styles['remarks-wrap']}`}>
      <Remarks remarks={remarks}/>
   </div>
   <div className={`${styles["active-wrap"]}`}>
    <Active actives={actives} id={id}/>
   </div>
   <div className={`${styles["btns-wrap"]}`}>
    <Btns btns={btns} id={id}/>
   </div>
   <div className={`${styles["user-wrap"]}`}>
      <User info={userInfo}/>
   </div>
  </div>)
}


export default Carman;